<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        {{ pgTitle }}
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 合同信息 --start-->
    <div class="conter_box1">
      <div class="conter_box1_top" :data="listData">
        <p>计划信息</p>
        <ul>
          <li>
            <span>企业名称</span>
            <el-input
              placeholder="请输入企业名称"
              v-model="listData.enterpriseName"
              style="width: 70%"
              :disabled="!esits"
            ></el-input>
          </li>
          <li>
            <span>联系人</span>
            <el-input
              placeholder="请输入联系人"
              v-model="listData.contacts"
              style="width: 70%"
              :disabled="!esits"
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              v-model="listData.contactsPhone"
              placeholder="请输入联系方式"
              style="width: 70%"
              :disabled="!esits"
            >
            </el-input>
          </li>
          <li>
            <span>企业地址</span>
            <el-input
              v-model="listData.adress"
              placeholder="请输入企业地址"
              style="width: 70%"
              :disabled="!esits"
            ></el-input>
          </li>
        </ul>
      </div>
      <div class="conter_box1_button">
        <p>产品信息</p>
        <template>
          <el-table :data="products" style="width: 100%" max-height="200px">
            <el-table-column label="产品图号" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.productNumber" :disabled="!esits"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.productName" :disabled="!esits"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单价 (元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.price" :disabled="!esits"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="需求数量" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.number" :disabled="!esits"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="小计 (元)" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.xiaoji" :disabled="!esits"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="计划到货日期" align="center">
              <template slot-scope="scope">
                <el-date-picker
                  v-model="scope.row.planTime"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="width: 95%"
                  :disabled="!esits"
                >
                </el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
    <!-- 合同信息 --end-->

    <div class="bottom">
      <el-button type="primary" size="medium" @click="tongguo()" v-show="this.edit != 1"
      >确定
      </el-button
      >
      <el-button type="info" size="medium" @click="bohui" v-show="this.edit != 1"
      >驳回
      </el-button
      >
      <el-button type="info" size="medium" v-show="this.edit == 1" @click="revert()">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
    <el-dialog
      title="驳回"
      :visible.sync="dialogVisible"
      width="30%"
      :modal-append-to-body="false">
      <span>驳回理由 : </span>
      <el-input style="width: 80%" v-model="listData.bohui"  placeholder="请输入驳回理由"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false ,getbo()">确 定</el-button>
    <el-button @click="dialogVisible = false">取 消</el-button>
  </span>
    </el-dialog>
  </div>

</template>
<script>

import axios from "axios";

export default {
  data() {
    return {
      esits: true,
      listData: {
        enterpriseNumber: "",
        enterpriseName: "",
        contacts: "",
        contactsPhone: "",
        adress: "",
        id: "",
        bohui:"",
        khId:""
      },
      clientIdarr: [],
      productLists: [],
      products: [{}],
      clientId: "",
      pgTitle: "订单审核",
      userId: 0,
      dialogVisible:false,
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.userName= JSON.parse(localStorage.getItem("message")).Name;
    this.edit = this.$route.query.edit;
    if (this.edit == 1) {
      this.pgTitle = "订单详情";
      this.esits = false;
    } else {
      this.pgTitle = "订单审核";
      this.esits = false;
    }
    this.getDat(this.$route.query.id);
  },
  methods: {
    getDat(id) {
      axios(
        "/JX_java/sales/orderFrom/getSaleOrderPlanDetails?spId=" +
        this.$route.query.id
      ).then((res) => {
        console.log(
          res
        )
        let result = res.data.data;
        this.listData = result.clientMessage;
        console.log(this.listData)
        this.listData.khId = result.clientMessage.id
        this.products = result.products;
      });
    },
    //通过
    tongguo() {
      const arr = {
        "bohui": "",
        "checkId": this.userId,
        "checkTime": "",
        "clientId": this.listData.khId,
        "clientMessage": {
          "adress": this.listData.adress,
          "contacts": this.listData.contacts,
          "contactsPhone": this.listData.contactsPhone,
          "createonTime": "",
          "createonUserid": 0,
          "debtAllmoney": 0,
          "debtExpire": 0,
          "debtNotDue": 0,
          "enterpriseName": "",
          "enterpriseNumber": this.listData.enterpriseNumber,
          "hezuoStatus": "",
          "hezuoYear": "",
          "id": 0,
          "jop": "",
          "kaipiaoContacts": "",
          "kaipiaoContactsphone": "",
          "kaipiaoDanwei": "",
          "kaipiaoKaihuaccount": "",
          "kaipiaoKaihuhang": "",
          "nashui": "",
          "orderMoney": 0,
          "status": "",
          "xinyongMoney": 0
        },
        "clientName": this.listData.enterpriseName,
        "createonTime": "",
        "createonUserid": null,
        "createonUsername": null,
        "id": this.$route.query.id,
        "products": [],
        "xiaoji": 0,
        "status": 2,
      }

        this.products.forEach(e => {
        const product = {
          "danwei": "",
          "id": 0,
          "number": 0,
          "orderId": 0,
          "planTime": "",
          "price": 0,
          "productId": 0,
          "productName": "",
          "productNumber": "",
          "supplierId": 0,
          "type": 0,
          "xiaoji": 0
        }
        product.danwei = e.danwei;
        product.number = e.number;
        product.planTime = e.planTime
        product.price = e.price
        product.productName = e.productName
        product.productNumber = e.productNumber
        product.type = e.type
        product.xiaoji = e.xiaoji
        arr.products.push(product);
      })
      // return
      axios
        .post(
          "/JX_java/sales/salesPlan/updateSalesPlanStatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    //驳回
    bohui() {
      this.dialogVisible = true
    },
    // 驳回函数
    getbo() {
      const arr = {
        "bohui": this.listData.bohui,
        "checkId": this.userId,
        "checkTime": "",
        "clientId": this.listData.khId,
        "clientMessage": {
          "adress": this.listData.adress,
          "contacts": this.listData.contacts,
          "contactsPhone": this.listData.contactsPhone,
          "createonTime": "",
          "createonUserid": 0,
          "debtAllmoney": 0,
          "debtExpire": 0,
          "debtNotDue": 0,
          "enterpriseName": "",
          "enterpriseNumber": this.listData.enterpriseNumber,
          "hezuoStatus": "",
          "hezuoYear": "",
          "id": 0,
          "jop": "",
          "kaipiaoContacts": "",
          "kaipiaoContactsphone": "",
          "kaipiaoDanwei": "",
          "kaipiaoKaihuaccount": "",
          "kaipiaoKaihuhang": "",
          "nashui": "",
          "orderMoney": 0,
          "status": "",
          "xinyongMoney": 0
        },
        "clientName": this.listData.enterpriseName,
        "createonTime": "",
        "createonUserid":null,
        "createonUsername": null,
        "id": this.$route.query.id,
        "products": [],
        "xiaoji": 0,
        "status": 3,
      }

      this.products.forEach(e => {
        const product = {
          "danwei": "",
          "id": 0,
          "number": 0,
          "orderId": 0,
          "planTime": "",
          "price": 0,
          "productId": 0,
          "productName": "",
          "productNumber": "",
          "supplierId": 0,
          "type": 0,
          "xiaoji": 0
        }
        product.danwei = e.danwei;
        product.number = e.number;
        product.planTime = e.planTime
        product.price = e.price
        product.productName = e.productName
        product.productNumber = e.productNumber
        product.type = e.type
        product.xiaoji = e.xiaoji
        arr.products.push(product);
      })
      // return
      axios
        .post(
          "/JX_java/sales/salesPlan/updateSalesPlanStatus", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.ryuan {
  width: 20%;
  margin-top: 10px;
  padding-left: 1%;

  p {
    height: 40px;
  }
}

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.conter_box1 {
  background: $white;
  width: 98%;
  margin-left: 20px;

  .conter_box1_top {
    padding: 5px 1% 0 1%;

    p {
      height: 40px;
      border-bottom: 1px solid #ebeef5;
    }

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 25%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;
      }
    }
  }

  .conter_box1_button {
    background: $white;
    margin-top: 10px;
    padding: 5px 1% 0 1%;
    margin-top: 20px;

    p {
      height: 40px;
      border-bottom: 1px solid #ebeef5;
    }

    /deep/ .cell {
      font-size: 14px !important;
      color: #999999;
      text-align: center;
      padding: 0;

      button {
        border: 0;
        background-color: #fff;
      }
    }

    /deep/ .el-table th {
      background-color: #fff;
    }

    .el-input {
      width: 96%;
    }
  }
}

.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 20px;
  // background: $white;
  position: relative;

  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style>
</style>
